<template>
  <div class="q-px-md text-panda-text-dark">
    <div
      class="line-height-32px bg-panda-dark-dark"
      style="position: relative;width:120%;left: -16px "
    >
      <q-btn icon="close" size="sm" @click="abort_match_edit" style="width: 30px;" />&nbsp;
      <span>开盘管理 &nbsp; {{editing_obj.homeTeamNames.zs}} vs {{editing_obj.awayTeamNames.zs}}</span>
    </div>

    <div class="text-red" style="padding-left:20px;">
      <q-icon name="warning" color="red"></q-icon>注意：请先仔细核查右侧赛程信息（包括主队、客队、联赛名、开赛时间等）确认无误后再操作开盘。
    </div>

    <div class="flex line-height-36px">
      <div class="float-left panda-edit-component-lable">比赛时间</div>
      <div class="float-left text-panda-text-light">{{ format_date(editing_obj.beginTime)}}</div>
    </div>
    <div class="flex line-height-36px">
      <div class="float-left line-height-36px panda-edit-component-lable">联赛名称</div>
      <div
        class="float-left line-height-36px text-panda-text-light"
      >{{ compute_table_item_show_name(editing_obj,'', 'leagueName') }}</div>
    </div>
    <div class="flex line-height-36px">
      <div class="float-left line-height-36px panda-edit-component-lable">主队名称</div>
      <div
        class="float-left line-height-36px text-panda-text-light"
      >{{ find_value_in_obj_bypath(editing_obj, 'editing_obj.homeTeamNames.zs' ) }}</div>
    </div>
    <div class="flex line-height-36px">
      <div class="float-left line-height-36px panda-edit-component-lable">客队名称</div>
      <div
        class="float-left line-height-36px text-panda-text-light"
      >{{ find_value_in_obj_bypath(editing_obj, 'editing_obj.awayTeamNames.zs' ) }}</div>
    </div>
    <div class="flex line-height-36px">
      <div class="float-left panda-edit-component-lable">联赛级别</div>

      <q-select
        filled
        rounded
        color="panda-text-light"
        bg-color="panda-light-light"
        style="    width: 200px;"
        v-model="editconfig_form.tournamentLevel"
        hide-bottom-space
        :options="match_level_constant"
        emit-value
        map-options
        dense
        options-dense
        :input-style="{ backgroundColor: '#ff0000' }"
        popup-content-class="bg-panda-light-light text-panda-text-light"
      ></q-select>
    </div>
    <div class="flex line-height-36px">
      <div class="float-left panda-edit-component-lable">操盘平台</div>
      <div class="float-left line-height-36px text-panda-text-light q-gutter-x-md">
        <q-radio
          v-model="editconfig_form.riskManagerCode"
          v-for="(item,index) in riskManagerCode_arr"
          :key="index"
          :val="item.code"
          :label="item.fullName"
        />
      </div>
    </div>
    <div class="flex line-height-36px">
      <div class="float-left panda-edit-component-lable">数据服务商</div>
      <div class="float-left line-height-36px text-panda-text-light q-gutter-x-md">
        <q-radio
          v-for="(item, index) in filter_dataSourceCode"
          :key="index"
          v-model="editconfig_form.matchSourceCode"
          :val="item.code"
          :label="item.fullName"
        />
      </div>
    </div>
    <div class="flex line-height-36px">
      <div class="float-left panda-edit-component-lable">开盘选择</div>

      <div class="float-left line-height-36px text-panda-text-light q-gutter-x-md">
        <q-checkbox
          v-model="editconfig_form.preMatchSupport"
          label="早盘"
          true-value="1"
          false-value="0"
        />
        <q-checkbox
          v-model="editconfig_form.liveOddSupport"
          true-value="1"
          false-value="0"
          label="滚球盘"
        />
      </div>
    </div>
    <div class="flex line-height-36px">
      <div class="float-left panda-edit-component-lable">操盘负责人</div>
      <q-select
        filled
        rounded
        color="panda-text-light"
        bg-color="panda-light-light"
        style="    width: 200px;"
        v-model="editconfig_form.operatorLiable"
        hide-bottom-space
        :options="test_select_option"
        emit-value
        map-options
        dense
        options-dense
        :input-style="{ backgroundColor: '#ff0000' }"
        popup-content-class="bg-panda-light-light text-panda-text-light"
      ></q-select>
    </div>
    <div class="flex line-height-36px">
      <div class="float-left panda-edit-component-lable">赛前操盘组</div>
      <q-select
        filled
        rounded
        color="panda-text-light"
        bg-color="panda-light-light"
        style="    width: 200px;"
        v-model="editconfig_form.preMatchOperateGroupId"
        hide-bottom-space
        :options="test_select_option"
        emit-value
        map-options
        dense
        options-dense
        :input-style="{ backgroundColor: '#ff0000' }"
        popup-content-class="bg-panda-light-light text-panda-text-light"
      ></q-select>
    </div>
    <div class="flex line-height-36px">
      <div class="float-left panda-edit-component-lable">赛中操盘组</div>
      <q-select
        filled
        rounded
        color="panda-text-light"
        bg-color="panda-light-light"
        style="    width: 200px;"
        v-model="editconfig_form.liveOperateGroupId"
        hide-bottom-space
        :options="test_select_option"
        emit-value
        map-options
        dense
        options-dense
        :input-style="{ backgroundColor: '#ff0000' }"
        popup-content-class="bg-panda-light-light text-panda-text-light"
      ></q-select>
    </div>

    <div class="row q-mt-lg q-mt-lg justify-start q-gutter-x-sm">
      <span class="panda-edit-component-lable"></span>
      <q-btn
        class="panda-btn-red-dense"
        style="width: 80px;height:24px;"
        @click="close_odds"
        label="一键封盘"
      />
      <q-btn
        class="panda-btn-light-dense"
        style="width: 80px;height:24px;"
        @click="confirm_save_and_odds"
        label="保存并开盘"
      />
      <q-btn
        class="panda-btn-dark-dense"
        style="width: 80px;height:24px;"
        @click="reset_match_edit"
        label="重置"
      />
    </div>
  </div>
</template>

<style>
</style>

<script>
import { mapGetters, mapActions } from "vuex";
import { api_match } from "src/api/index.js";
import mixins from "src/mixins/index.js";
import { match_manage_tabledata } from "src/mock/match/index.js";
import matchmixin from "src/mixins/pages/match/match.js";
import alert_component from "src/config/alert/match.js";
import languagemixins from "src/mixins/language/alllanguage.js";
export default {
  // 对应 对阵管理 中间部分 模块
  mixins: [...mixins, matchmixin, languagemixins],
  props: {
    editing_obj: ""
  },
  data() {
    return {
      editconfig_form_liveOddSupport: false,
      editing_obj_id: "",
      editconfig_form: {},
      editconfig_module: {
        tournamentLevel: "",
        matchSourceCode: 0,
        // id: 0,
        liveOperateGroupId: 1,
        operatorLiable: 1,
        preMatchOperateGroupId: 1,
        liveOddSupport: 0,
        preMatchSupport: 0,
        riskManagerCode: ""
      },
      matchSourceCode_arr: [],
      riskManagerCode_arr: [],
      base: []
    };
  },
  computed: {
    // 返回数据服务商数组
    filter_dataSourceCode() {
      return this.riskManagerCode_arr.filter(el => {
        if (
          this.editconfig_form.riskManagerCode === "PA" ||
          !this.editconfig_form.riskManagerCode
        ) {
          return el.code !== "PA";
        } else {
          return el.code === this.editconfig_form.riskManagerCode;
        }
      });
    }
  },
  created() {
    this.init_all();
  },
  watch: {
    editing_obj(val) {
      this.editing_obj_backup = this.$lodash.cloneDeep(val);
      this.init_all();
    }
  },
  methods: {
    /**
     *  风控  操盘平台 选项 是 此条信息关联的所有数据源 与 全局商业化 数据源的  交集 再加上 panda
     * 数据服务商 是  此条信息关联的所有数据源 与 全局商业化 数据源的  交集  存在 一下 两种大 方向
     * PA 风控  上面的 交集全部可选  单中数据源风控 则只能 选择对应的 数据源
     *
     * 字段  matchSourceCode  以谁作为开盘数据依据
     * 字段  riskManagerCode  以谁风控
     *
     */
    init_form() {
      this.init_form_base_with_module("editconfig_form", "editconfig_module");
    },
    init_all() {
      console.log("准备开盘的 重构后的 对象");
      console.log(this.editing_obj);
      // 获取详情
      this.editing_obj_id = this.editing_obj.id;
      this.init_form();
      this.editconfig_form = {
        tournamentLevel: this.editing_obj.tournamentLevel,
        matchSourceCode: +this.editing_obj.matchSourceCode,
        // id: 0,
        liveOperateGroupId: +this.editing_obj.liveOperateGroupId,
        operatorLiable: +this.editing_obj.operatorLiable,
        preMatchOperateGroupId: +this.editing_obj.preMatchOperateGroupId,
        liveOddSupport: "" + +this.editing_obj.liveOddSupport,
        preMatchSupport: "" + +this.editing_obj.preMatchSupport,
        riskManagerCode: +this.editing_obj.riskManagerCode
      };
      this.rebase_dataSource_code_to_needed();
    },
    rebase_dataSource_code_to_needed() {
      let arr = [];
      // 取出commercialized_dataSourceCode的对象
      arr = this.editing_obj.commercialized_dataSourceCode
        .concat([])
        .map(item =>
          this.dataSource_obj.raw_dataSource.find(el => el.code === item)
        );
      // 取出panda的值
      let obj = this.dataSource_obj.raw_dataSource.find(el => el.code === "PA");
      this.matchSourceCode_arr = arr.concat([]);
      // 取出dataSource_obj.raw_dataSource的变量
      let dataSource = arr.concat([]);
      // 备份源数组
      this.base = dataSource;
      this.riskManagerCode_arr = [obj, ...dataSource];
    },
    compute_show_time(val) {},
    close_odds() {},
    save_and_open_odds() {
      /**
       * 这里需要调用 三次接口
       * 1. 联赛级别修改接口
       * 2.比赛编辑接口
       * 3.回调内 重新请求当前 技术id 数据
       */

      let params = {};

      params = Object.assign({}, this.editconfig_form);
      params.id = this.editing_obj.id;

      api_match
        .post_matchManager_startMatchOdds(params)
        .then(res => {
          this.alert_message(res);
          let code = this.$lodash.get(res, "data.code");
          if (code == 200) {
            this.save_and_open_odds_change_tournamentLevel();
            // 通知刷新
            this.delete_injected_dynamic_style(); // 删除存留样式
            this.handle_dialog_onOk_callback_success(
              alert_component.opening_success
            );
            this.$emit("minilist_need_refresh", 1, this.editing_obj_id);
            this.$nextTick(() => {
              this.$emit("minilist_need_refresh", 0);
            });
          }
        });
    },
    reset_match_edit() {
      this.editing_obj = this.$lodash.cloneDeep(this.editing_obj_backup);
      this.init_all();
    },
    confirm_save_and_odds() {
      // 找到对应值的标题值
      function findKey(arr, obj) {
        if (Array.isArray(arr) && typeof obj !== undefined) {
          let find_value = arr.find(x => x.code === obj);
          let return_key = find_value ? find_value.fullName : "";
          return_key = return_key || "";
          return return_key;
        } else {
          return "";
        }
      }
      let homeTeamNames =
        this.find_value_in_obj_bypath(
          this.editing_obj,
          "editing_obj.homeTeamNames.zs"
        ) || "";
      let awayTeamNames =
        this.find_value_in_obj_bypath(
          this.editing_obj,
          "editing_obj.awayTeamNames.zs"
        ) || "";
      let league_name = "";
      let riskManager = findKey(
        this.riskManagerCode_arr,
        this.editconfig_form.riskManagerCode
      );
      let matchSourceCode = findKey(
        this.filter_dataSourceCode,
        this.editconfig_form.matchSourceCode
      );
      let preMatchSupport =
        this.editconfig_form.preMatchSupport === "1" ? "早盘" : "";
      let liveOddSupport =
        this.editconfig_form.liveOddSupport === "1" ? "滚球" : "";
      let open_choice;
      if (homeTeamNames || awayTeamNames) {
        league_name = `${homeTeamNames} VS ${awayTeamNames}`;
      }
      if (liveOddSupport && preMatchSupport) {
        open_choice = `${preMatchSupport}、${liveOddSupport}`;
      } else {
        open_choice = preMatchSupport || liveOddSupport;
      }
      let message = `<div class="text-left pl85x">
                        <h1 class="panda-font-size panda-text-blue line-height-24px">请检查赛程信息，确认无误后开盘</h1>
                        <p class="panda-font-size panda-text-light q-mb-xs">${league_name}</p>
                        <p class="panda-font-size panda-text-light q-mb-xs">操盘平台 : ${riskManager}</p> 
                        <p class="panda-font-size panda-text-light q-mb-xs">数据商 : ${matchSourceCode}</p>
                        <p class="panda-font-size panda-text-light q-mb-xs">开盘选择 : ${open_choice}</p>   
                      </div>`;
      let cssText = `.q-dialog__inner > div {height: 225px} .q-card > div:last-child, .q-card > img:last-child {
  top: auto; bottom: 28px}`;
      this.inject_dynamic_style(cssText);
      this.begin_script_dialog_process(message, this.save_and_open_odds);
    },
    // 修改联赛级别
    save_and_open_odds_change_tournamentLevel() {
      //
      let params = {
        id: this.editing_obj.standardTournamentId,
        tournamentLevel: this.editconfig_form.tournamentLevel
      };
      api_match
        .post_tournament_modify(params)
        .then(res => {
          this.alert_message(res);
        });
    },
    save_and_open_odds_when_success() {
      //
      let params = Object.assign({}, this.editconfig_form, {
        id: this.editing_obj_id
      });

      api_match
        .post_matchManager_startMatchOdds(params)
        .then(res => {
          this.alert_message(res);
          let code = this.$lodash.get(res, "data.code");

          if (code == 200) {
            // 通知刷新
            this.handle_dialog_onOk_callback_success(
              alert_component.opening_success,
              () => {}
            );

            this.$emit("minilist_need_refresh", 1, this.editing_obj_id);
            //  let  data = this.$lodash.get(res,'data.data')

            this.$nextTick(() => {
              this.$emit("minilist_need_refresh", 0);
            });
          }
        });
    },
    // 销毁此组件，并且切换路由
    abort_match_edit() {
      this.$emit("close");
      this.set_breadcrumbsPart4([]);
      this.set_use_router_cache(1);
    }
  }
};
</script>
